<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>计算机学院图书馆</title>
    <script src="lib/jquery/jquery-3.6.0.min.js"></script>
    <script src="js/app.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="lib/login/css/htmleaf-demo.css">
    <link rel="stylesheet" type="text/css" href="lib/login/css/style-1.css">

</head>

<body>
    <!--页头图片-->

    <div class="header">

        <!--    轮播图-->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="image/header_img.jpg" alt="...">
                </div>
                <div class="item">
                    <img src="image/header_img.jpg" alt="...">
                </div>
                <div class="item">
                    <img src="image/header_img.jpg" alt="...">
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>


        </div>
        <!--    <img src="image/header_img.jpg" alt="图片无法加载">-->
    </div>


    <!--导航栏-->

    <nav class="navbar navbar-default">
        <div class="container-fluid">

            <!--            首页链接-->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
                <a class="navbar-brand active" href="index.html">首页</a>
            </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <!--                专题，咨询，借阅，还书，链接-->
                <ul class="nav navbar-nav">
                    <li>
                        <a> </a>
                    </li>
                    <li><a href="book_details.html">全部<span class="sr-only"></span></a></li>
                    <li>
                        <a> </a>
                    </li>
                    <li><a href="lib/404/404.html">资讯</a></li>
                    <li>
                        <a> </a>
                    </li>
                    <li><a href="lib/404/404.html">借阅</a></li>
                    <li>
                        <a> </a>
                    </li>
                    <li><a href="lib/404/404.html">还书</a></li>
                </ul>
                <!--                <form class="navbar-form navbar-left">-->
                <!--                    <div class="form-group">-->
                <!--                        <input type="text" class="form-control" placeholder="三体 刘慈欣">-->
                <!--                    </div>-->
                <!--                    <button type="submit" class="btn btn-info">查找图书</button>-->
                <!--                </form>-->
                <ul class="nav navbar-nav navbar-right">

                    <!--                    搜索图书功能-->
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" id="search_input" placeholder="输入书名">
                        </div>
                        <a class="btn btn-info" id="search_btn" onclick="AjaxSubmit()">查找图书</a>
                        <!--                    onclick="AjaxSubmit();"-->
                    </form>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我的 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" onclick="showDialog()">登录</a></li>
                            <li><a href="#">注册</a></li>
                            <li><a href="#">修改资料</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">管理图书</a></li>
                        </ul>
                    </li>
                    <!--                    <li class="dropdown">-->
                    <!--                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>-->
                    <!--                        <ul class="dropdown-menu">-->
                    <!--                            <li><a href="#">Action</a></li>-->
                    <!--                            <li><a href="#">Another action</a></li>-->
                    <!--                            <li><a href="#">Something else here</a></li>-->
                    <!--                            <li role="separator" class="divider"></li>-->
                    <!--                            <li><a href="#">Separated link</a></li>-->
                    <!--                        </ul>-->
                    <!--                    </li>-->
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!--网页功能-->
    <div class="hotListContainer" class="row">
        <!-- <div class="col-sm-3 col-md-3 col-xs-6">
            <div class="thumbnail">
                <img src="http://www.hbuas.edu.cn/__local/7/A4/D3/DF74EB1D55471133077FC89AC10_944BCAF5_10A08.jpg" alt="图片加载失败">
                <div class="caption">
                    <h3><span>《</span>
                        <span>活着</span>
                        <span>》</span></h3>
                    <h4><span>作&nbsp;&nbsp;&nbsp;&nbsp;者：</span><span>余华</span>
                        <br>
                        <span>藏书点：</span><span>计算机学院图书馆</span>
                    </h4>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div> -->



    </div>

    <!--登录弹窗-->

    <div class="ui-dialog" id="dialogMove" onselectstart='return false;'>
        <div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;">
            用户登录
            <a class="ui-dialog-closebutton" href="javascript:hideDialog();"></a>
        </div>
        <div class="ui-dialog-content">
            <div class="ui-dialog-l40 ui-dialog-pt15">
                <input class="ui-dialog-input ui-dialog-input-username" type="input" placeholder="手机/邮箱/用户名" />
            </div>
            <div class="ui-dialog-l40 ui-dialog-pt15">
                <input class="ui-dialog-input ui-dialog-input-password" type="input" placeholder="密码" />
            </div>
            <div class="ui-dialog-l40">
                <a href="#">忘记密码</a>
            </div>
            <div>
                <a class="ui-dialog-submit" href="#">登录</a>
            </div>
            <div class="ui-dialog-l40">
                <a href="#">立即注册</a>
            </div>
        </div>
    </div>
    <script>
        // 登录弹出窗口
        let dialogInstace, onMoveStartId; //	用于记录当前可拖拽的对象

        // var zIndex = 9000;

        //	获取元素对象
        function g(id) {
            return document.getElementById(id);
        }

        //	自动居中元素（el = Element）
        function autoCenter(el) {
            var bodyW = document.documentElement.clientWidth;
            var bodyH = document.documentElement.clientHeight;

            var elW = el.offsetWidth;
            var elH = el.offsetHeight;

            el.style.left = (bodyW - elW) / 2 + 'px';
            el.style.top = (bodyH - elH) / 2 + 'px';

        }

        //	自动扩展元素到全部显示区域
        function fillToBody(el) {
            el.style.width = document.documentElement.clientWidth + 'px';
            el.style.height = document.documentElement.clientHeight + 'px';
        }

        //	Dialog实例化的方法
        function Dialog(dragId, moveId) {

            var instace = {};

            instace.dragElement = g(dragId); //	允许执行 拖拽操作 的元素
            instace.moveElement = g(moveId); //	拖拽操作时，移动的元素

            instace.mouseOffsetLeft = 0; //	拖拽操作时，移动元素的起始 X 点
            instace.mouseOffsetTop = 0; //	拖拽操作时，移动元素的起始 Y 点

            instace.dragElement.addEventListener('mousedown', function(e) {

                var e = e || window.event;

                dialogInstace = instace;
                instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft;
                instace.mouseOffsetTop = e.pageY - instace.moveElement.offsetTop;

                // instace.moveElement.style.zIndex = zIndex ++;
            })

            return instace;
        }

        //	在页面中侦听 鼠标弹起事件
        document.onmouseup = function(e) {

            dialogInstace = false;
            clearInterval(onMoveStartId);

        }

        //	在页面中侦听 鼠标移动事件
        document.onmousemove = function(e) {
            var e = e || window.event;
            var instace = dialogInstace;
            if (instace) {

                var maxX = document.documentElement.clientWidth - instace.moveElement.offsetWidth;
                var maxY = document.documentElement.clientHeight - instace.moveElement.offsetHeight;

                instace.moveElement.style.left = Math.min(Math.max((e.pageX - instace.mouseOffsetLeft), 0), maxX) + "px";
                instace.moveElement.style.top = Math.min(Math.max((e.pageY - instace.mouseOffsetTop), 0), maxY) + "px";
            }
            if (e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }
        };

        //	拖拽对话框实例对象
        Dialog('dialogDrag', 'dialogMove');

        function onMoveStart() {

        }


        //	重新调整对话框的位置和遮罩，并且展现
        function showDialog() {
            g('dialogMove').style.display = 'block';
            g('mask').style.display = 'block';
            autoCenter(g('dialogMove'));
            fillToBody(g('mask'));
        }

        //	关闭对话框
        function hideDialog() {
            g('dialogMove').style.display = 'none';
            g('mask').style.display = 'none';
        }

        //	侦听浏览器窗口大小变化
        //window.onresize = showDialog;
    </script>
    <div class="ui-mask" id="mask" onselectstart="return false">

    </div>

    <!--页尾-->
    <footer class="footer">
        <img src="http://www.hbuas.edu.cn/img/banner-zy.png" alt="图片无法显示">
    </footer>

</body>

</html>